<style lang="scss">
  @import 'index';
</style>

<template>
  <div class="ga-container">
    <div class="ga-cart">
      <!--商品列表-->
      <ul class="ga-group-list ga-media-list">
        <li class="item" v-for="(item,index) in goodsItems" :key="index">
          <checkbox-group @change="checkFun" :data-index="index"  class="radio-box">
            <label class="weui-check__label">
              <checkbox class="weui-check" :value="item.id" :checked="item.checked" />
              <div class="weui-cell__hd weui-check__hd_in-checkbox">
                <icon class="weui-icon-checkbox_circle" type="circle" size="23" v-if="!item.checked"></icon>
                <icon class="weui-icon-checkbox_success" type="success" size="23" color="#ff3a35" v-if="item.checked"></icon>
              </div>
            </label>
          </checkbox-group>

          <div class="item-media">
            <a href="#" class="img-box">
              <img :src="item.goods_icon" alt="">
            </a>
          </div>
          <div class="item-inner clearfix">
            <p class="title">{{item.goods_name}}</p>
            <p class="p1">{{item.goods_attr ? item.goods_attr : ''}}</p>
            <p class="p2">
              <span class="span1">¥{{item.goods_price}}</span>
              <span class="span2">¥{{item.market_price}}</span>
            </p>

            <!--<div class="ga-number">
              <span class="gaIcon up">+</span>
              <span class="num">100</span>
              <span class="gaIcon down">-</span>
            </div>-->
            <gaNumber :val="item.goods_number" :min="0" :id="item.id" @on-change="numChange"></gaNumber>
          </div>
        </li>
      </ul>

      <!--结算-->
      <div class="ga-bottom-fixed">
        <div class="bottom">
          <div class="total">
            <radio-group  class="radio-box" @change="checkAllFun">
              <label class="weui-cell weui-check__label">
                <checkbox class="weui-check" :value="1" :checked="checkAll" />

                <div class="weui-cell__hd weui-check__hd_in-checkbox">
                  <icon class="weui-icon-checkbox_circle" type="circle" size="23" v-if="!checkAll"></icon>
                  <icon class="weui-icon-checkbox_success" type="success" size="23" color="#ff3a35" v-if="checkAll"></icon>
                </div>

                <div class="weui-cell__bd">全选</div>
              </label>
            </radio-group>

            <div>
              合计：<span class="f36 gOrange">{{totalCost}}</span>
            </div>
          </div>
          <div class="btn primary" @click="jiesuan">结算</div>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
  import gaNumber from '@/components/gaNumber'
import {isLogin,handleError,showToast} from '@/utils/handleLogin'
export default {
    components: {
      gaNumber
    },
    data () {
      return {
        scrollTop: 100,
        goodsItems: [],
      }
    },

    computed: {
      checkAll: {
        get () {
          let goods = this.goodsItems
          let len = 0
          if (goods.length !== 0) {
            goods.forEach(item => {
              if (item.checked) {
                len++
              }
            })
            return len === goods.length
          }
        }
      },
      totalCost () {
        let goods = this.goodsItems
        let cost = 0
        goods.forEach(item => {
          if (item.checked) {
            cost += item.goods_price * item.goods_number
          }
        })
        return this.$_util.changeTwoDecimal(cost)
      }
    },
    onShow () {
       isLogin(() => {
          this.load()
       })
    },
    created () {

    },

    mounted () {
      // wx.hideTabBar()// 隐藏tabBar
    },

    methods: {
      async load () {
        /*购物车商品信息*/
        this.$_util.ajax.post('https://guo-a.com/mapi/cart/cartlist?token=' + this.$store.state.Token).then((res) => {
            if (res.code === 200) {
              this.goodsItems= []
              let dataList = res.data || []
              dataList.forEach(item => {
                item.checked = false
                this.goodsItems.push(item)
              })
            }
        })
      },
      jiesuan () {
         let data = []
         this.goodsItems.forEach(item => {
            if(item.checked === true){
               data.push(item.id)
            }
         })
         if(data.length == 0){
          showToast('请选择要购买的商品')
            return false
         }
         let dataStr = encodeURIComponent(JSON.stringify(data))
          wx.navigateTo({
              url: '/pages/order/main?data=' + dataStr
          })
      },
      /**
       * 路由跳转
       */
      bindNavigateTo (url) {
          wx.navigateTo({
            url: url
          })    
      },
      bindSwitchTab (url) {
          wx.switchTab({
            url
          })
      },
      /**
       * 全选
       * **/
      checkAllFun (e) {
        const goods = this.goodsItems
        let ischecked = true
        if(e.mp.detail.value == 1){
            ischecked = true
        }else{
            ischecked = false
        }
        let foo = function (value) {
          value.checked = ischecked
        }
        goods.forEach(foo)
      },
      /**
       * 单个选择
       * **/
      checkFun (e) {
        let index = e.target.dataset.index// 选中checkbox的value值
        this.goodsItems[index].checked = e.mp.detail.value.indexOf(this.goodsItems[index].id) > -1
      },
      /**
       * 数量加减
       * value : num 数值
       * **/
      async numChange (value, id) {
        /*数量减到0的时候删除*/
        if(value === 0){
            this.$_util.ajax.post('https://guo-a.com/mapi/cart/del?token=' + this.$store.state.Token,{ids:id}).then((res) => {
                if(res.code === 200){
                    this.load()
                }
            })
            return false
        }
        let arr = this.goodsItems.filter(item => {
          return item.id === id
        })
        if (arr.length === 0) {
          return false
        }
        if (arr[0].goods_number === value) {
          return false
        }
        /*更新购物车商品数量*/
        this.$_util.ajax.post('https://guo-a.com/mapi/cart/setnum?token=' + this.$store.state.Token,{
            id: id,
            num: value
        }).then((res) => {
            console.log(res)
            if(res.code === 200){
                this.$set(arr[0], 'goods_number', value)
            }
        })
      }
    }
}
</script>
